<template>
  <div class="tab">
    <cube-tab-bar :showSlider="true"
                  v-model="selectedLabel"
                  :data="tabs"
                  ref="tabBar"
                  class="border-bottom-1px"
                  :useTransition="false">
    </cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide :loop='false'
                  :auto-play='false'
                  :show-dots='false'
                  :initial-index="index"
                  ref="slide"
                  @change="onChange"
                  @scroll="onScroll"
                  :options="slideOptions">
        <!-- 将index作为key传入进去 -->
        <cube-slide-item v-for="(tab,index) in tabs" :key="index">
          <!-- 原来的三个组件用vue提供的动态组件component :is -->
          <!-- 除了组件之外，还有组件所对应的数据，给它起名为data -->
          <component :is="tab.component" :data="tab.data" ref="component"></component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
  // import Goods from 'components/goods/goods'
  // import Ratings from 'components/ratings/ratings'
  // import Seller from 'components/seller/seller'

export default {
  name: 'tab',
  props: {
    // 更改一：把写死的tabs写活
    tabs: {
      // 类型为数组
      type: Array,
      // 默认值为空
      default() {
        return []
      }
    },
    // 扩展一个initialIndex
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      index: this.initialIndex,
      // tabs: [{
      //   label: '商品'
      // }, {
      //   label: '评价'
      // }, {
      //   label: '商家'
      // }],
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      }
    }
  },
  computed: {
    selectedLabel: {
      get() {
        return this.tabs[this.index].label
      },
      set(newVal) {
        this.index = this.tabs.findIndex((value) => {
          return value.label === newVal
        })
      }
    }
  },
  // components: {
  //   Goods,
  //   Ratings,
  //   Seller
  // },
  mounted () {
    // 第一次载入时调用onChange事件保证页面的渲染
    this.onChange(this.index)
  },
  methods: {
    onChange(current) {
      this.index = current
      // refs.component为一个数组
      const component = this.$refs.component[current]
      // 不是所有component都需要fetch这个钩子，所以先做判断
      component.fetch && component.fetch()
      // console.log(this.$refs.tab.$el.classList)
      // this.$refs.tab.$el.classList.value.remove('cube-tab_active')
      // this.$refs.tab.$el[index].classList.add('cube-tab_active')
    },
    onScroll(pos) {
      // 第一步：拿到slider的宽度，即tabBar宽度
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth
      // 第二步：拿到整个slider组件的宽度，即滚动区域的宽度
      const slideWidth = this.$refs.slide.slide.scrollerWidth
      // 第三步：算出滚动的距离
      const transformX = (-pos.x / slideWidth) * tabBarWidth
      // 第四步：将滚动的距离赋值给下划线的滚动距离
      this.$refs.tabBar.setSliderTransform(transformX)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable'
.tab
  >>> .cube-tab
    padding 10px 0
  display flex
  flex-direction column
  height 100%
  .slide-wrapper
    flex 1
    overflow hidden
</style>
